<template>
  <div class="oil-color-left borderStyle">
    <div class="blueTitleStyle">站所概览</div>
    <div class="box-cont">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        <i slot="prefix" class="el-input__icon el-icon-search search"></i>
      </el-input>
      <el-tree
        ref="tree"
        :filter-node-method="filterNode"
        :data="allData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        icon-class="custom"
        :default-expanded-keys="expandedKes"
        node-key="id"
      ></el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
import { OnlineMonitorModule } from "@/store/modules/OnlineMonitor";
import { Tree } from "element-ui";

interface dataType {
  label: string;
  children: object | string;
}

@Component
export default class HomeLeft extends Vue {
  filterText: string = "";
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);

    if (tree) {
      tree.filter(val);
    }
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }

  // 当前data
  public defaultProps: dataType = {
    label: "name",
    children: "child",
  };
  //默认展开树层
  expandedKes = [];
  get allData() {
    //  console.log(publicAPIModule.stationTreeList[0].id);
    //  this.expandedKes.push(publicAPIModule.stationTreeList[0].id)
    //  console.log(this.expandedKes);

    return publicAPIModule.stationTreeList;
  }
  // 节点-点击进入二级页面
  handleNodeClick(data: any) {
    console.log(data);
    if (!data.child) {
      var item: any = {
        name: data.name,
        code: data.id,
      };
      // console.log(item);

      OnlineMonitorModule.setStationName(item);
      this.$router.push({ path: "/onlinemonitor/OilColor", query: item });
    }
  }
  mounted() {
    this.expandedKes.push(publicAPIModule.stationTreeList[0].id);
    //  console.log(this.expandedKes);
  }
}
</script>

<style lang="scss" scoped>
.oil-color-left {
  width: 2.94rem;
  height: 100%;
  .box-cont {
    height: calc(100% - 0.27rem);
    box-sizing: border-box;
    padding:  0.1rem ;
    overflow: auto;
    .search {
      width: 0.3rem;
      height: 0.3rem;
      border-right: 1px solid #717ca1;
      color: #9eeaec;
    }
  }
}
</style>

